import React, { useState, forwardRef, useImperativeHandle } from 'react';
// forwardRef : 为高阶组件的强化函数, 该函数返回一个新的组件,就是HOC
// 一般用来在函数组件中处理子组件, 这样函数的父组件就可以给子组件使用 ref 属性了

// 如果函数子组件被父组件通过ref 属性访问的时候, 需要抛出当前组件中的数据或方法, 这样父组件才能访问到该
// 函数子组件上的数据和方法, 否则访问的值为undefned, 这里和类组件有区分,因为类组件有实例对象,所有的数据
// 和方法都在实例对象中, 所以不用抛出,直接访问实例对象就可以

// 抛出时, 需要借助另一个hook 函数, useImperativeHandle  
// 语法: useImperativeHandle(ref,()=>{return {key:value,key:value}})
const Son = (props, ref) => {
    const [nameArr, setNameArr] = useState([{ id: 1, name: "内马尔" }, { id: 2, name: "C罗" }])

    useImperativeHandle(ref, () => {
        return {
            nameArr,
            setNameArr
        }
    })
    return (
        <div>
            我是子组件
            <ul>
                {
                    nameArr.map((item, index) => {
                        return <li key={item.id}>{item.name}</li>
                    })
                }
            </ul>
        </div>
    );
}

export default forwardRef(Son);
